import Vue from "vue";
import Vuex from "vuex";
import { getTokenPrice } from "@/api/core";
import { getTokenBySymbol } from "@/utils/token";
import { getChainByCode, getDefaultTokenByChain } from "@/config/chain";
import Web3 from 'web3';

Vue.use(Vuex);

const SwapState = {
  key: "SwapState",
  get: () => {
    const temp = localStorage.getItem(SwapState.key);
    const t = temp && JSON.parse(temp) || {};
    const d = {
      from: getTokenBySymbol("UNI"),
      to: getTokenBySymbol("USDC"),
      ...t,
    }
    const { rpcUrls, nativeCurrency } = getChainByCode(d.chainCode || 'bsc');
    if (rpcUrls && rpcUrls.length) {
      // d.provider = new Web3(rpcUrls[0]);
    }
    d.rpcUrls = rpcUrls;
    d.nativeCurrency = nativeCurrency;
    return d;
  },
  set: () => {
    const { from, to, chainCode, chainId, tolerance, showMore, gasPrice } = store.state;
    localStorage.setItem(
      SwapState.key,
      JSON.stringify({
        from,
        to,
        chainCode,
        chainId,
        tolerance,
        showMore,
        gasPrice
      })
    );
  },
};

window.addEventListener("beforeunload", (e) => {
  SwapState.set();
});

window.addEventListener("load", () => {
  const { state } = store;
  const { from, to, nativeCurrency, rpcUrls } = state;
  if (rpcUrls && rpcUrls.length > 0) {
    Object.assign(state, "provider", new Web3(rpcUrls[0]));
  }
  getTokenPrice([from.symbol, to.symbol, nativeCurrency.symbol]).then(res => {
    from.usd = res[from.symbol] || 0;
    to.usd = res[to.symbol] || 0;
    nativeCurrency.usd = res[nativeCurrency.symbol] || 0;
  })
})

const store = new Vuex.Store({
  state: {
    account: "",
    wallet: "",
    chainCode: "bsc",
    chainId: 56,
    connect: false,
    price: 0,
    tolerance: 1,
    showMore: false,
    gasPrice: 5,
    pairCode: "",
    liquidityPage: "home",
    provider: {},
    signer: null,
    nativeCurrency: null,
    ...SwapState.get(),
  },
  mutations: {
    SET_GASPRICE(state, payload) {
      state.gasPrice = payload;
    },
    SET_SHOWMORE(state, payload) {
      state.showMore = payload;
    },
    SET_TOLERANCE(state, payload) {
      state.tolerance = payload;
    },
    SET_PRICE(state, payload) {
      state.price = payload;
    },
    SET_CONNECT(state, payload) {
      state.connect = payload;
    },
    SET_LIQUIDITYPAGE(state, payload) {
      state.liquidityPage = payload;
    },
    SET_PAIRCODE(state, payload) {
      state.pairCode = payload;
    },
    SET_FROM(state, payload) {
      state.from = payload;
      getTokenPrice([payload.symbol]).then(res => {
        state.from.usd = res[payload.symbol] || 0;
      })
    },
    SET_TO(state, payload) {
      state.to = payload;
      getTokenPrice([payload.symbol]).then(res => {
        state.to.usd = res[payload.symbol] || 0;
      })
    },
    SET_SWITCH(state) {
      const _from = { ...state.from };
      const _to = { ...state.to };
      state.from = _to;
      state.to = _from;
    },
    SET_ACCOUNT(state, payload) {
      state.account = payload;
    },
    SET_WALLET(state, payload) {
      state.wallet = payload;
    },
    SET_SIGNER(state, payload) {
      state.signer = payload;
    },
    SET_CHAINCODE(state, payload) {
      state.chainCode = payload;
      const chain = getChainByCode(payload);
      if (chain) {
        const { chainId, chainCode, rpcUrls } = chain;
        state.chainId = chainId;
        if (rpcUrls && rpcUrls.length) {
          state.provider = new Web3(rpcUrls[0]);
        }
        const { inToken, outToken } = getDefaultTokenByChain(chainCode);
        state.from = inToken;
        state.to = outToken;
      }
      SwapState.set();
     // window.location.reload();
    },
  },
  actions: {
    async FETCH_CONTRACT({ commit, state }) {
      // const { abi, contract, approveContract } = await getContract(state.chainCode);
      // commit("SET_SWAP_ABI", abi);
      // commit("SET_SWAP_CONTRACT", contract);
      // commit("SET_SWAP_APPROVE_CONTRACT", approveContract);
    },
  },
  modules: {},
});

export default store;
